<template>
  <div class="login-page">
    <div class="login-box">
      <n-form :show-label="false">
        <h2>login</h2>
        <n-form-item>
          <n-input v-model:value="user.username" placeholder="用户名"></n-input>
        </n-form-item>
        <n-form-item>
          <n-input v-model:value="user.password" placeholder="密码" type="password"></n-input>
        </n-form-item>
        <n-form-item>
          <n-button type="primary" block attr-type="submit" @click="onSubmit"> 登录</n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>

</template>
<script setup lang="ts">
import {login_api} from "@api/blog.ts";

const router = useRouter()
const message = useMessage()
const user = ref({
  username: '',
  password: ''
})
const onSubmit = async () => {
  try {
    await login_api(user.value).then(res => {
      sessionStorage.setItem('token', res.token)
    })
    await router.push('/')
  } catch (e) {
    message.error("用户名或密码错误。")
  }
}
</script>
<style lang="scss" scoped>
.login-box {
  width: 600px;
  background: #fff;
  padding: 30px;
  position: fixed;
  top: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 5px;
}

.login-page {
  min-height: 100vh;
  background: #cccccc;
}

</style>